<template>
  <div class="app-container strategy">
    <span style="font-weight:bold">用工需求单控制策略</span>
    <el-divider></el-divider>
    <el-form :model="form" ref="form" :rules="rules" label-width="180px">
      <el-form-item label="预估业务量取数方式:" prop="strategy1" v-show="false">
        <el-radio-group v-model="form.strategy1">
        <el-radio  :label="1">手动输入</el-radio>
        <el-radio   :label="2">系统对接取数</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="启动方案匹配方式:" prop="strategy2">
        <el-radio-group v-model="form.strategy2">
        <el-radio  :label="1">手动匹配</el-radio>
        <el-radio  :label="2">系统自动匹配</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="超配人数触发审核机制:" prop="strategy3">
        <el-radio-group v-model="form.strategy3" style="width: 100%">
          <el-form-item>
            <el-radio :label="1"  @change="changeTable">不触发</el-radio>
          </el-form-item>
          <el-form-item>
            <el-radio :label="2" style="display:inline"  @change="changeTable" >统一比率</el-radio>
            <el-input v-model="form.businessVolumeValue" placeholder=""  :disabled="open" style="max-width: 180px" >
              <i slot="suffix" style="margin-right: 10px;text-align:center">%</i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-radio :label="3"  @change="changeTable">单独设置比率</el-radio>
            <el-table
              :data="tableData"
              border
              @cell-mouse-enter="handleCellEnter"
              @cell-mouse-leave="handleCellLeave"
              style="width: auto">
              <el-table-column
                prop="name"
                label="业务量分档"
                width="120">
              </el-table-column>
              <template v-for="(item,index)  in tableTileData">
                <el-table-column
                  :prop="item.value"
                  :label="item.lable"
                  min-width="100">
                  <template slot-scope="scope">
                    <el-input style="width: 100%;" v-if="scope.row.isEdit" class="item" v-model="scope.row[item.value]" placeholder="请输入"></el-input>
                    <div v-else class="txt">{{scope.row[item.value]}}</div>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </el-form-item>

        </el-radio-group>
      </el-form-item>


<!--      <span style="font-weight:bold">用工需求测算单控制策略</span>-->
<!--      <el-divider></el-divider>-->

<!--      <el-form-item label="启动方案匹配方式:" prop="strategy4">-->
<!--        <el-radio v-model="radio" label="1">手动输入</el-radio>-->
<!--        <el-radio v-model="radio" label="2">系统对接取数</el-radio>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="启动方案匹配方式:" prop="strategy5">-->
<!--        <el-radio v-model="radio" label="1">手动测算</el-radio>-->
<!--        <el-radio v-model="radio" label="2">自动测算</el-radio>-->
<!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>






  </div>
</template>
<style lang='scss'>
.app-container.strategy .item{
  width: 100px;
  /* 调整elementUI中样式 如果不需要调整请忽略 */
  .el-input__inner{
    height: 24px!important;
  }
}
.app-container.strategy .txt{
  line-height: 24px;
  padding: 0 9px;
  box-sizing: border-box;
}
</style>

<script>
import { list, listTabletitle,add} from "@/api/job/strategy/strategy";


export default {
  name: "strategyConfig",

  data() {
    return {
      tableData: [],
      tableTileData:[],
      showTableData: [],
      // 遮罩层
      loading: true,


      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: true,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        strategy1: [
          { required: true, message: "预估业务量取数方式需要选择" }
        ],
        strategy2: [
          { required: true, message: "启动方案匹配方式需要选择", }
        ],
        strategy3: [
          { required: true, message: "超配人数触发审核机制需要选择"}
        ]
      }
    };
  },
  created() {
    this.listTabletitle();
    this.getList();


  },
  methods: {
    /** 鼠标移入cell */
    handleCellEnter (row, column, cell, event) {
      row.isEdit = true
    },
    /** 鼠标移出cell */
    handleCellLeave (row, column, cell, event) {
      row.isEdit = false;
      var value="";
      var valueName="";
      var businessId='';
      for(var i=0;i<this.tableTileData.length;i++){
        var lable =this.tableTileData[i].value;

       if(i!=this.tableTileData.length-1){
         value=value+row[lable]+";";
         valueName=valueName+this.tableTileData[i].lable+";";
         businessId=businessId+this.tableTileData[i].businessId+";";

       }else{
         value=value+row[lable];
         valueName=valueName+this.tableTileData[i].lable;
         businessId=businessId+this.tableTileData[i].businessId;
       }

      }
      this.form.value =value;
      this.form.valueName =valueName;
      this.form.businessId =businessId;
    },
    changeTable(value){
      if(value==1){
        this.open =true;
        this.tableData=[];
      }
      if(value==2){
        this.open =false;
        this.tableData=[];
      }
      if(value ==3){
        this.open =true;
        if( this.showTableData.length ==0){
          this.showTableData= [
            {

              name: '设置比率%',
              value1: '',
              value2: '',
              value3: '',
              value4: '',
              value5: '',
              value6: '',
              isEdit: false
            }
          ];
        }
        this.tableData=this.showTableData;


      }

    },


    /** 查询菜单列表 */
    getList() {
      list().then(response => {
        var data = response.data;
        this.form = data;
        if(data.strategy3==3){
          this.tableData=data.list;
        }else if(data.strategy3==2){
          this.open=false;
        }

      });
    },
    listTabletitle(){
      listTabletitle().then(response => {
        var data = response.data;

        this.tableTileData=data;
      });
    },

    // 取消按钮
    cancel() {
      this.open = true;
      this.tableData=[];
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        strategy1: 1,
        strategy2: 1,
        strategy3: 1,
      businessVolumeValue:''
      };
      this.resetForm("form");

    },


    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.strategy3==3) {
            var array = this.form.value.split(";");

            for (var i = 0; i < array.length; i++) {
              if (array[i] == '') {
                this.$alert("业务量分档不能为空", "错误提示", {dangerouslyUseHTMLString: true});
                return;
              }
              if (0 > Number(array[i]) || Number(array[i]) > 100) {
                this.$alert("业务量分档值不在0-100内", "错误提示", {dangerouslyUseHTMLString: true});
                return;
              }
            }
          }
          if(this.form.strategy3==2){
            if(this.form.businessVolumeValue==null || this.form.businessVolumeValue==''){
              this.$alert("统一比率不能为空", "错误提示", {dangerouslyUseHTMLString: true});
              return;
            }
            if(this.form.businessVolumeValue<0 ||this.form.businessVolumeValue >100){
              this.$alert("统一比率值不在0-100内", "错误提示", {dangerouslyUseHTMLString: true});
              return;
            }
          }
          add(this.form).then(response => {
            this.msgSuccess("保存成功");

          });
        }
      });
    },

  }
};
</script>
